<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Beehive</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <!-- 引入 echarts.js -->
    <script th:src="@{/js/echarts.min.js}"></script>

    <style>
        .row {
            margin-left: -8px;
        }
    </style>
</head>
<body>

<div class="container-fluid">
<!--    <nav aria-label="breadcrumb">-->
<!--        <ol class="breadcrumb">-->
<!--            <li class="breadcrumb-item"><a href="#">BeehiveAdmin</a></li>-->
<!--            <li class="breadcrumb-item active" aria-current="page">数据统计</li>-->
<!--        </ol>-->
<!--    </nav>-->
    <div class="row">
        <div class="col">
            <div id="generalDiv" style="width: 525px;height:350px;"></div>
        </div>
        <div class="col">
            <div id="recommendDiv" style="width: 525px;height:350px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div id="downloadCountDiv" style="width: 525px;height:350px;"></div>
        </div>
        <div class="col">
            <div id="visitedAvgDiv" style="width: 525px;height:350px;"></div>
        </div>
    </div>
</div>


<script>

    $(function () {
        // 先初始化，在异步加载
        let generalChart = echarts.init(document.getElementById('generalDiv'));
        generalChart.showLoading();
        $.get('/theme/charts/general').done(function (data) {
            // 注意数据格式，一定要解析
            data = JSON.parse(data);
            generalChart.hideLoading();
            // 指定图表的配置项和数据
            let generalOption = {
                title: {
                    text: '主题数据'
                },
                tooltip: {},
                legend: {
                    data: ['图书数量', '访问次数', '下载总数']
                },
                xAxis: {
                    data: data.themes
                },
                yAxis: {},
                series: [{
                    name: '图书数量',
                    type: 'bar',
                    data: data.bookNums
                }, {
                    name: '访问次数',
                    type: 'bar',
                    data: data.visitedCounts
                }, {
                    name: '下载总数',
                    type: 'bar',
                    data: data.downloadCounts
                }],
                aria: {
                    enabled: true,
                    decal: {
                        show: true
                    }
                }
            };
            // 使用刚指定的配置项和数据显示图表。
            generalChart.setOption(generalOption);
        })

        // 基于准备好的dom，初始化echarts实例
        let downloadCountChart = echarts.init(document.getElementById('downloadCountDiv'));
        downloadCountChart.showLoading();
        $.get('/theme/charts/downloadAvg').done(function (data) {
            data = (JSON).parse(data);
            downloadCountChart.hideLoading();
            // let option = {
            //     color: ['#80FFA5', '#00DDFF', '#37A2FF'],
            //     title: {
            //         text: '下载次数'
            //     },
            //     tooltip: {
            //         trigger: 'axis',
            //         axisPointer: {
            //             type: 'cross',
            //             label: {
            //                 backgroundColor: '#6a7985'
            //             }
            //         }
            //     },
            //     legend: {
            //         data: ['日均下载', '月均下载', '年均下载']
            //     },
            //     toolbox: {
            //         feature: {
            //             saveAsImage: {}
            //         }
            //     },
            //     grid: {
            //         left: '3%',
            //         right: '4%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     xAxis: [
            //         {
            //             type: 'category',
            //             boundaryGap: false,
            //             data: data.themes
            //         }
            //     ],
            //     yAxis: [
            //         {
            //             type: 'value'
            //         }
            //     ],
            //     series: [
            //         {
            //             name: '日均下载',
            //             type: 'line',
            //             stack: '总量',
            //             smooth: true,
            //             lineStyle: {
            //                 width: 0
            //             },
            //             showSymbol: false,
            //             areaStyle: {
            //                 opacity: 0.8,
            //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                     offset: 0,
            //                     color: 'rgba(128, 255, 165)'
            //                 }, {
            //                     offset: 1,
            //                     color: 'rgba(1, 191, 236)'
            //                 }])
            //             },
            //             emphasis: {
            //                 focus: 'series'
            //             },
            //             data: data.dayAvgList
            //         },
            //         {
            //             name: '月均下载',
            //             type: 'line',
            //             stack: '总量',
            //             smooth: true,
            //             lineStyle: {
            //                 width: 0
            //             },
            //             showSymbol: false,
            //             areaStyle: {
            //                 opacity: 0.8,
            //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                     offset: 0,
            //                     color: 'rgba(0, 221, 255)'
            //                 }, {
            //                     offset: 1,
            //                     color: 'rgba(77, 119, 255)'
            //                 }])
            //             },
            //             emphasis: {
            //                 focus: 'series'
            //             },
            //             data: data.monAvgList
            //         },
            //         {
            //             name: '年均下载',
            //             type: 'line',
            //             stack: '总量',
            //             smooth: true,
            //             lineStyle: {
            //                 width: 0
            //             },
            //             showSymbol: false,
            //             areaStyle: {
            //                 opacity: 0.8,
            //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                     offset: 0,
            //                     color: 'rgba(55, 162, 255)'
            //                 }, {
            //                     offset: 1,
            //                     color: 'rgba(116, 21, 219)'
            //                 }])
            //             },
            //             emphasis: {
            //                 focus: 'series'
            //             },
            //             data: data.yearAvgList
            //         }
            //     ]
            // };

            let option = {
                title: {
                    text: '下载次数'
                },
                tooltip: {},
                legend: {
                    data: ['日均下载', '月均下载', '年均下载']
                },
                xAxis: {
                    data: data.themes
                },
                yAxis: {},
                series: [{
                    name: '日均下载',
                    type: 'line',
                    data: data.dayAvgList,
                    smooth: true
                }, {
                    name: '月均下载',
                    type: 'line',
                    data: data.monAvgList,
                    smooth: true
                }, {
                    name: '年均下载',
                    type: 'line',
                    data: data.yearAvgList,
                    smooth: true
                }],
                aria: {
                    enabled: true,
                    decal: {
                        show: true
                    }
                }
            };


            downloadCountChart.setOption(option);

        });

        let recommendChart = echarts.init(document.getElementById('recommendDiv'));
        recommendChart.showLoading();
        $.get('/theme/charts/recommended').done(function (data) {
            recommendChart.hideLoading();
            data = JSON.parse(data);
            console.log(data);

            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '已推荐数量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.list

                    }
                ]
            };
            if (option && typeof option === 'object') {
                recommendChart.setOption(option);
            }
        });


        let visitedAvgChart = echarts.init(document.getElementById('visitedAvgDiv'));
        visitedAvgChart.showLoading();
        // 获取主题平均访问数据
        $.get('/theme/charts/visitedAvg').done(function (data) {
            data = JSON.parse(data);
            visitedAvgChart.hideLoading();
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '访问次数'
                },
                tooltip: {},
                legend: {
                    data: ['日均访问', '月均访问', '年均访问']
                },
                xAxis: {
                    data: data.themes
                },
                yAxis: {},
                series: [{
                    name: '日均访问',
                    type: 'bar',
                    data: data.dayAvgList
                }, {
                    name: '月均访问',
                    type: 'bar',
                    data: data.monAvgList
                }, {
                    name: '年均访问',
                    type: 'bar',
                    data: data.yearAvgList
                }],
                aria: {
                    enabled: true,
                    decal: {
                        show: true
                    }
                }
            };
            visitedAvgChart.setOption(option);
        })
    });

</script>
</body>
</html>